<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>起点</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/index.css" />
    <link rel="stylesheet" href="../../styles/icon/iconfont.css" />
    <style>
        .el-header, .el-footer {
            background-color: black;
            color: white;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: black;
            color: white;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .container {
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            background-color: #100c2a;
        }

        .previous {
            background-color: #8e8a9f;
            color: #decece;
        }

        .round {
            border-radius: 50%;
        }
    </style>
</head>

<body>
<div class="app" id="app">
    <el-col :span="1" style="height: 100%" class="container">
        <el-button type="info" class="previous round" onclick='location.href=("bili3.html")'>&#8249;</el-button>
    </el-col>
    <el-col :span="22" style="height: 100%">
    <el-row :span="8" style="height: 30%">
        <el-col style="height: 100%" :span="24"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart" style="width: 100%; height: 100%"></div>
        </div></el-col>
    </el-row>
    <el-row :span="8" style="height: 70%">
        <el-col style="height: 100%" :span="8"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart2" style="width: 100%; height: 100%"></div>
        </div></el-col>
        <el-col style="height: 100%" :span="16"><div style="height: 100%" class="grid-content bg-purple">
            <div ref="chart3" style="width: 100%; height: 100%"></div>
        </div></el-col>
    </el-row>
    </el-col>

    <el-col :span="1" style="height: 100%" class="container">
        <el-button type="info" class="previous round" onclick='location.href=("bili5.html")'>&#8250;</el-button>
    </el-col>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/echarts.js"></script>
<script src="../../js/request.js"></script>
<script src="api/test.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                data1:{
                    title: [],
                    bili:[],
                },
                data2:{
                    title: [],
                    monthvote:[],
                },
                data3:{
                    title: [],
                    novelcount:[],
                    type:[],
                },
            }
        },
        computed: {},
        created() {
            this.getNewList();
            this.getNewList2();
            this.getNewList3();
        },
        beforeDestroy() {
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart(this.data1);
                this.initChart2(this.data2);
                this.initChart3(this.data3);
            });
        },
        methods: {
            getNewList() {
                bili4().then((res) => {

                    if (res.code === 1) {
                        // console.log(res)
                        for (let i = 0; i < res.data.length; i++) {
                            this.data1.title[i] = res.data[i].novelname;
                            this.data1.bili[i] = res.data[i].bili;
                        }
                        console.log(this.data1)
                        console.log(res.data)
                        this.initChart(this.data1);
                    }

                })
            },
            getNewList2() {
                monthvote().then((res) => {

                    if(res.code===1){
                        // console.log(res)
                        for (let i =0; i <res.data.length; i++) {
                            this.data2.title[res.data.length-1-i] = res.data[i].novelname;
                            this.data2.monthvote[res.data.length-1-i] = res.data[i].monthvote;
                        }
                        console.log(this.data2)
                        this.initChart2(this.data2);
                    }

                })
            },
            getNewList3() {
                radar1().then((res) => {

                    if (res.code === 1) {
                        // console.log(res)
                        for (let i = 0; i < res.data.length; i++) {
                            this.data3.title[i] = res.data[i].title;
                            this.data3.novelcount[i] = res.data[i].novelcount;
                            this.data3.type[i] = res.data[i].type;
                        }
                        console.log(this.data3)
                        this.initChart3(this.data3);
                    }

                })
            },
            initChart(data1) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart,'dark');
                var option = {
                    tooltip: {
                        trigger: 'item',
                    },
                    title:{
                        text: "小说总字数与总推荐分析",
                        left: "center",
                        textStyle:{
                            fontSize:40,
                            color:'#fcf9f9'
                        },
                    },
                    xAxis: {
                        data: this.data1.title,
                        axisLabel: {
                            interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                            formatter: function(params) {
                                var newParamsName = "";
                                var paramsNameNumber = params.length;
                                var provideNumber = 3; //一行显示几个字
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;
                                    }
                                } else {
                                    newParamsName = params;
                                }
                                return newParamsName;
                            }
                        },
                    },
                    yAxis: {},
                    series: [
                        {
                            type: "line",
                            data: this.data1.bili,
                        },
                    ],
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            initChart2(data2) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart2,'dark');
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text:  "本月月票排行榜top10",
                        x:"right",
                        y:"bottom",
                        textStyle: {
                            fontSize:30
                        },
                    },
                    color: ['#d84430'],
                    tooltip: {
                        show: true
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            inside: true,
                            verticalAlign: 'bottom',
                            lineHeight: 40,
                            color: '#DDDFEB',
                            formatter: function (value, index) {   // 设置y轴文字的颜色
                                if (index > 2) {
                                    return '{first|' + value + '}'
                                } else {
                                    return '{other|' + value + '}'
                                }
                            },
                            rich: {
                                other: {
                                    color: '#DDDFEB',
                                    opacity: 0.57
                                },
                                first: {
                                    color: '#DDDFEB'
                                }
                            }
                        },
                        data: this.data2.title,
                    },
                    xAxis: {
                        nameTextStyle: {
                            color: 'rgba(255, 255, 255, 0.8)',
                            align: 'right'
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 0.8)'
                        },
                    },
                    grid: {
                        top: '0%',
                        bottom: '0%',
                        left: '0%',
                        right: '0%'
                    },
                    series: [{
                        name: '本月月票排行榜',
                        barWidth: 15,
                        type: 'bar',
                        data: this.data2.monthvote,
                        itemStyle: {
                            normal: {
                                borderRadius: [3, 20, 20, 3],
                                color: function (params) {   // 设置柱形图的颜色
                                    if (params.dataIndex === 9) {
                                        return '#d84430'
                                    } else if (params.dataIndex === 8) {
                                        return '#f38237'
                                    } else if (params.dataIndex === 7) {
                                        return '#e2aa20'
                                    } else {
                                        return '#608289'
                                    }
                                }
                            },
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                // this.charts.setOption(option);
                window.addEventListener('resize', () => {
                    this.charts.resize()
                })
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            initChart3(data3) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart3,'dark');
                var option = {
                    title: {
                        text: '女生各类型小说最高字数分析',
                        textStyle: {
                            fontSize:40,
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.data3.type
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.data3.novelcount,
                            type: 'line'
                        }
                    ]
                };
                myChart.setOption(option);
                //图表大小变动从新渲染，动态自适应
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
        },
    })
</script>
</body>
</html>
